<template>
    <div>
        <div>全部账单</div>

        <a-table :columns="columns" :data-source="data">
            <!-- 修改时间列样式 -->
            <template #billTime="{ text }">
                <a>{{ text }}</a>
            </template>
            <!-- 修改类型列样式 -->
            <template #tags="{ text: tag }">
                <span>
                    <a-tag :color="tag === 1 ? 'volcano' : 'green'">{{ tag === 1 ? '支出' : '收入' }}</a-tag>
                </span>
            </template>
            <!-- 修改操作列样式 -->
            <template #action="{ record }">
                <span>
                    <a>修改{{ record.key }}</a>
                    <a-divider type="vertical" />
                    <a-popconfirm
                        title="Are you sure delete this task?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="confirm"
                        @cancel="cancel"
                    >
                        <a href="#">Delete</a>
                    </a-popconfirm>
                </span>
            </template>
        </a-table>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
import { message } from 'ant-design-vue';
const columns = [
    {
        title: '账单时间',
        dataIndex: 'billTime',
        key: 'billTime',
        slots: {
            customRender: 'billTime',
        },
        width: 130,
        align: 'center'
    },
    {
        title: '账单类型',
        key: 'billType',
        dataIndex: 'billType',
        slots: {
            customRender: 'tags',
        },
        width: 100,
        align: 'center'
    },
    {
        title: '账单所属',
        dataIndex: 'billBook',
        key: 'billBook',
        width: 120,
    },
    {
        title: '账单金额',
        key: 'billCoin',
        dataIndex: 'billCoin',
        width: 120,
    },
    {
        title: '备注信息',
        key: 'billMessage',
        dataIndex: 'billMessage',
    },
    {
        title: '操作',
        key: 'action',
        slots: {
            customRender: 'action',
        },
        width: 150,
        align: 'center'
    },
];
const data = [
    {
        _id: "hui001",
        billTime: '2021-07-12',
        billType: 1,
        billBook: 'MyBook',
        billCoin: 289.16,
        billMessage: '恰饭开销',
    },
    {
        _id: "hui002",
        billTime: '2021-07-13',
        billType: 0,
        billBook: 'MyBook',
        billCoin: 289.16,
        billMessage: '恰饭开销',
    },
    {
        _id: "hui003",
        billTime: '2021-07-14',
        billType: 1,
        billBook: 'MyBook',
        billCoin: 289.16,
        billMessage: '恰饭开销',
    },
    {
        _id: "hui004",
        billTime: '2021-07-15',
        billType: 0,
        billBook: 'MyBook',
        billCoin: 289.16,
        billMessage: '恰饭开销',
    },
];
export default defineComponent({
    setup() {
        const confirm = e => {
            console.log(e);
            message.success('Click on Yes');
        };

        const cancel = e => {
            console.log(e);
            message.error('Click on No');
        };
        return {
            data,
            columns,
            confirm,
            cancel,
        };
    },

    components: {
    },
});
</script>

<style lang="" scoped></style>
